<template>
    <transition name="fade">
        <div
            v-if="visible"
            class="selector-wrapper"
            @click.self="handleClose"
        >
            <div class="selector-content">
                <div class="selector">
                    <p
                        v-if="title"
                        class="selector-title"
                    >
                        {{ title }}
                    </p>
                    <input
                        v-else
                        v-model="keyword"
                        class="selector-search iconfont"
                        type="text"
                        :placeholder="placeholder"
                    />
                    <div class="selector-list-wrapper">
                        <ul class="selector-list">
                            <li
                                v-for="(item, index) in innerData"
                                :key="index"
                                :class="{ selected: item.label === selectedData.label }"
                                @click="handleClick(item)"
                            >
                                {{ item.label }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'Selector',
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        selectedData: {
            type: Object,
            default: () => ({}),
        },
        visible: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            placeholder: '\ue620 搜索',
            isSearch: false,
            searchData: [],
            keyword: '',
        };
    },
    computed: {
        innerData() {
            let data = this.data;
            let isSearch = this.keyword !== '';
            return isSearch
                ? data.filter((item) => item.label.match(new RegExp(this.keyword, 'g')))
                : data;
        },
    },
    watch: {
        visible(val) {
            if (!val) this.keyword = '';
        },
    },
    mounted() {},
    methods: {
        handleClose() {
            this.$emit('update:visible', false);
        },
        handleClick(item) {
            this.$emit('on-submit', item);
            this.handleClose();
        },
        handleFocus() {
            this.$refs.input.focus();
            this.isFocus = true;
        },
    },
};
</script>

<style scoped>
.selector-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    padding-left: 48px;
    color: #666;
}
.selector-content {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    box-shadow: 0 0 15px #999;
}
.selector {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.selector-title {
    padding-left: 16px;
    font-size: 14px;
    line-height: 40px;
    color: #aaa;
}
.selector-search {
    width: calc(100% - 32px);
    border: 0;
    padding: 0 20px;
    border-radius: 5px;
    margin: 6px 16px;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
}
.selector-search:focus {
    text-align: left;
}
.selector-list-wrapper {
    flex: 1;
    overflow-y: auto;
}
.selector-list {
    padding: 0 16px;
    border-bottom: solid thin #eee;
    color: #000;
    background-color: #fff;
}
.selector-list li {
    font-size: 16px;
    line-height: 40px;
    padding-right: 12px;
}
.selector-list li.selected {
    background: url('~@/assets/images/icon-tick.png') no-repeat 100% center;
    background-size: 12px;
}
.selector-list li:not(:last-child) {
    border-bottom: solid thin #eee;
}

.fade-enter-active,
.fade-leave-active {
    transition: right 0.3s;
}
.fade-enter,
.fade-leave-to {
    right: -100vw;
}
</style>
